<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>搜索</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .pt {
            margin-top: 0.1rem !important;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="header-common">
            <div class="flex-x-s header">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="search flex-x-s">
                    <span class="iconfont">&#xe71e;</span>
                    <input id="inputId" type="search" maxlength="20" placeholder="请搜索关键词" v-model="keyword"
                        @search="search">
                </div>
                <div class="search-btn" @click="search">搜索</div>
            </div>
        </div>
        <div class="pt">
            <div class="nosearch-bg" v-if="!hasHistory && !isSelected">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/search/nosearch-bg.png" alt="" class="nosearch-img">
                <div class="tips-text">暂无搜索历史</div>
            </div>
            <!-- 历史列表 -->
            <div class="search-list" v-show="isSelected">
                <div class="flex-x-sb list-item" v-for="(item,index) in showProductList" :key="index"
                    @click="goPage(item.name)">
                    <div class="left">{{item.name}}</div>
                    <div class="right flex-x-c">
                        <span>{{item.num}}</span>
                        <span class="iconfont">&#xe666;</span>
                    </div>
                </div>
                <div class="nosearch-bg" v-show="showProductList.length === 0">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/search/nosearch-bg.png" alt="" class="nosearch-img">
                    <div class="tips-text">无相关结果</div>
                </div>
            </div>
            <!-- 历史搜索 -->
            <div class="search-history" v-show="hasHistory&&!isSelected">
                <div class="title">
                    <div class="title-text">
                        历史搜索
                    </div>
                    <div :class="['title-more', 'iconfont', isExpand ? 'title-expand' : '']" @click="expandSeachedList">
                        &#xe609;</div>
                </div>
                <div class="search-lable">
                    <span v-for="(item, index) in visitSearchedList" :key="index"
                        @click="selectHistory(item)">{{filterText(item)}}</span>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script>
        apiready = function () {
            vm = new Vue({
                el: '.app',
                data: {
                    title: api.pageParam.title || '',
                    titlePlus: '',
                    showProductList: [],
                    isExpand: false,
                    historyList: [],
                    productList: [{
                        name: '设备出售',
                        num: 0,
                        sellDeviceCount: 1,
                        index: 0
                    }, {
                        name: '求购设备',
                        num: 0,
                        buyDeviceCount: 1,
                        index: 1
                    }, {
                        name: '出租设备',
                        num: 0,
                        leaseDeviceCount: 1,
                        index: 2
                    }, {
                        name: '求租设备',
                        num: 0,
                        rentDeviceCount: 1,
                        index: 3
                    }, {
                        name: '求职',
                        num: 0,
                        jobCount: 1,
                        index: 4
                    }, {
                        name: '招聘',
                        num: 0,
                        recruitCount: 1,
                        index: 5
                    }, {
                        name: '货找车',
                        num: 0,
                        forCarCount: 1,
                        index: 6
                    }, {
                        name: '车找货',
                        num: 0,
                        forGoodsCount: 1,
                        index: 7
                    }, {
                        name: '配件',
                        num: 0,
                        partsCount: 1,
                        index: 8
                    },
                    //  {
                    //     name: '仓储',
                    //     num: 0,
                    //     storageCount: 1,
                    //     index: 9
                    // },
                     {
                        name: '维修保养',
                        num: 0,
                        maintenanceCount: 1,
                        index: 10
                    }, {
                        name: '二手材料',
                        num: 0,
                        steelCount: 1,
                        index: 11
                    },, {
                        name: '行业资讯',
                        num: 0,
                        informationCount: 1,
                        index: 12
                    }],
                    keyword: '',
                    isSelected: false,
                    moduleTypes: ['BUY_DEVICE', 'FOR_CAR', 'FOR_GOODS', 'JOB', 'LEASE_DEVICE',
                        'MAINTENANCE', "PARTS", "RECRUIT", "RENT_DEVICE", "SELL_DEVICE", "STORAGE","STEEL","INFORMATION"]
                },
                created() {
                    console.log('参数:', JSON.stringify(api.pageParam));
                    this.historyList = ($api.getStorage("searchedList") && JSON.parse($api
                        .getStorage("searchedList"))) || []
                },
                mounted() {
                    this.initData()
                    this.autoFocus()
                },
                computed: {
                    hasHistory() {
                        return this.historyList.length !== 0;
                    },
                    visitSearchedList() {
                        if (this.isExpand) {
                            return this.historyList;
                        }
                        return this.historyList.slice(0, 8);
                    }
                },
                methods: {
                    initData() {
                        if (!api.pageParam) return false;
                        console.log("搜索》》"+JSON.stringify(api.pageParam) )
                        this.titlePlus = api.pageParam.titlePlus
                    },
                    // 自动聚焦
                    autoFocus() {
                        if (api.systemType == 'android') {
                            setTimeout(() => {
                                var softInput = api.require('softInputMgr');
                                softInput.toggleKeyboard();
                            }, 100)
                        }
                        document.querySelector('#inputId').focus()
                    },
                    back() {
                        api.closeWin();
                    },
                    selectHistory(item) {
                        this.keyword = item
                        this.search();
                    },
                    saveSearchedKeyword() {
                        this.historyList = this.historyList.filter(item => item !== this.keyword);
                        if (this.keyword) {
                            this.historyList.unshift(this.keyword);
                        }
                        if (this.historyList.length > 15) {
                            this.historyList.splice(this.historyList.length - 1, 1)
                        }
                        $api.setStorage("searchedList", JSON.stringify(this.historyList))
                    },
                    search() {
                        if (this.keyword){
                            if (this.keyword.length >= 10){
                                toastBottom('长度需要在10字以内');
                                return false
                            }
                        }
                        this.saveSearchedKeyword();
                        this.getSearchList();
                        vm.isSelected = true;
                    },
                    expandSeachedList() {
                        var vm = this
                        api.confirm({
                            title: '是否清空历史搜索',
                            buttons:['确定', '取消']
                        },function(ret,err){
                            if(ret.buttonIndex == 1){
                                vm.isExpand = !vm.isExpand;
                                vm.historyList = [];
                                $api.setStorage(vm.title + "searchedList", JSON.stringify(vm.historyList))
                            }
                        });
                    },
                    goPage(name) {
                        api.openWin({
                            name: 'search_list_win',
                            url: './search_list_win.html',
                            bounces: false,
                            pageParam: {
                                name: name,
                                keyword: this.keyword,
                            }
                        });
                    },
                    getSearchList() {
                        var vm = this;
                        var moduleTypes = []
                        if (this.titlePlus == '首页') {
                            moduleTypes = ['BUY_DEVICE', 'FOR_CAR', 'FOR_GOODS', 'JOB', 'LEASE_DEVICE',
                                'MAINTENANCE','STEEL',"INFORMATION"
                            ]
                            this.titlePlus = '首页1'
                            this.getSearchList()
                        } else if (this.titlePlus == '首页1') {
                            moduleTypes = ["PARTS", "RECRUIT", "RENT_DEVICE", "SELL_DEVICE", "STORAGE"]
                        } else if (this.titlePlus == '整机买卖') {
                            moduleTypes = ["SELL_DEVICE", "BUY_DEVICE"]
                        } else if (this.titlePlus == '租赁出租') {
                            moduleTypes = ["LEASE_DEVICE", "RENT_DEVICE"]
                        } else if (this.titlePlus == '维修保养') {
                            moduleTypes = ["MAINTENANCE"]
                        } else if (this.titlePlus == '配件商城') {
                            moduleTypes = ["PARTS"]
                        } else if (this.titlePlus == '仓储物流') {
                            moduleTypes = ["STORAGE", "FOR_GOODS", "FOR_CAR"]
                        } else if (this.titlePlus == '用工招聘') {
                            moduleTypes = ["RECRUIT", "JOB"]
                        }else if (this.titlePlus == '店铺') {
                            moduleTypes = ["SELL_DEVICE","LEASE_DEVICE", "PARTS",]
                        }
                        fnGet(interfaces.PRODUCT_MODULE.SEARCH.SEARCH_MODULECOUNT, {
                                keyword: vm.keyword,
                                moduleTypes: moduleTypes,
                                queryOwn: false,
                            }, true,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.showProductList = []
                                    vm.productList.map(item => {
                                        for (var key in ret.data) {
                                            if (item[key] && ret.data[key]) {
                                                item.num = ret.data[key]
                                            }
                                        }
                                        if (item.num > 0) {
                                            vm.showProductList.push(item)
                                        }
                                    })
                                    vm.titlePlus =  vm.titlePlus == '首页1' ? '首页' : vm.titlePlus
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                    }
                },
            })
        }
    </script>
</body>

</html>
